<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>
    <script src="vue/vue.js"></script>
    <script src="vue/axios.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 60px;
            background-color: rgba(0, 40, 77, 1);
        }

        .container {
            display: flex;
            flex: 1;
        }

        .container .left {
            width: 280px;
            background-color: rgba(0, 21, 41, 1);
        }

        .container .right {
            flex: 1;
            background-color: #f2f2f2;
            padding: 20px;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: #fff;
            border: 1px solid #FFFFFF;
        }

        .title {
            font-size: 22px;
            color: #fff;
            line-height: 60px;
            margin-left: 26px;
            display: inline-block;
        }

        .header .right {
            float: right;
            height: 60px;
        }

        .header .exit {
            font-size: 14px;
            color: #fff;
            line-height: 60px;
            cursor: pointer;
            margin-right: 16px;
        }

        .header .username {
            color: #fff;
            cursor: pointer;
            margin-right: 25px;
        }

        .touxiang {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #fff;
            position: relative;
            border-radius: 50%;
            top: 12px;
            left: -8px;
            cursor: pointer;
        }

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }

        .menu-title {
            color: #fff;
            font-size: 14px;
            margin-left: 30px;
        }
        .fa:hover{
            cursor: pointer;
        }
        .fa {
            margin-left: 30px;
            margin-top: 33px;
            width: 200px;
            height: 22px;
            position: relative;
        }
        .fa .brother{
            position: absolute;
            top:4px;
        }
        .fa .sister {
            position: absolute;
            left: 170px;
        }
        .menu-sub-title {
            color: #aeaeae;
            margin-left: 48px;
            margin-top: 15px;
            list-style: none;
            font-size: 14px;
            font-weight: 400;
        }

        .content-one {
            width: 100%;
            height: 36px;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #FFFFFF;

            margin-top: 22px;
        }

        .content-one-a {
            float: right;
            width: 145px;
            height: 36px;
            background-color: rgba(24, 144, 255, 1);
            border-radius: 4px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;
            margin-right: 15px;
        }

        .content-one span {
            line-height: 36px;
        }

        .content-two {
            margin: 15px auto;
            table-layout: fixed;
            width: 98%;
            height: 54px;
            border-collapse: collapse;
        }
        .content-two thead tr {
            background-color: rgba(250, 250, 250, 1);
            font-weight: 700;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);

        }

        .content-two  td{
            height: 54px;
        }

        .content-two tbody tr{

            width: 100%;
            height: 54px;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            line-height: 18px;
            border-bottom: 1px solid rgba(232, 232, 232, 1);
        }

        .content-two tbody tr a{
            text-decoration: none;
            color: #1890FF;
            font-weight: 400;
            font-size: 14px;
        }
        .first{
            width: 80px;
        }

        .state-active{
            color: rgba(255, 0, 0, 0.647058823529412);
        }
        .part:first-child{
            margin-left: 0;
        }
        .part{
            margin-left: 15px;
        }

        .mt{

                transform: rotate(-180deg);
            }
        .menu-active{

            transform: rotate(0deg);
        }
    </style>


</head>
<body>

<div id="app">
    <div class="header">
        <div class="title">
            厦门市思明区人民法院投票系统
        </div>
        <div class="right">
                <span class="touxiang">
                    <img class="center" :src="logo" alt="" width="46" height="46">
                </span>
            <span class="username">{{username}}</span>
            <span class="exit">退出</span>
        </div>
    </div>
    <div class="container">
        <div class="left">
            <ul>
                <li v-for="(item,index) in menu">
                    <div @click="subshow(index)" class="fa">

                        <img src="images/u9.png" height="15" width="15" class="brother"/>
                        <span class="menu-title">{{item.title}}</span>
                        <img :class="{mt:true,'menu-active':item.children_show}"
                             v-if="item.children && item.children.length != 0"  src="images/u17.png" alt=""
                             class="sister" height="22" width="22"  />
                    </div>
                    <ul v-if="item.children.length != 0 && item.children_show" class="sub-menu">
                        <li v-for="child in item.children" class="menu-sub-title">
                            {{child.title}}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="content">
                <div class="content-one">
                    <div class="content-one-a">

                        <span>创建空白问卷调查</span>

                    </div>

                </div>

                <table class="content-two">
                    <thead>
                    <tr class="content-two-a">
                        <td class="first"></td>
                        <td>历史记录</td>
                        <td>发布日期</td>
                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="site in sites">
                        <td> {{ site.name1}}</td>
                        <td> {{ site.name2}}</td>
                        <td> {{ site.name3}}</td>
                        <td :class="{'state-active':site.name4=='发布中'}"> {{ site.name4}}</td>
                        <td>
                            <a href="#" v-for="(font,index) in site.name5"  class="part">{{font}}</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <!--<table class="two-part" >-->
                    <!---->
                <!--</table>-->
            </div>
        </div>
    </div>
</div>


</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            username: "陈伟霆",
            logo: 'images/u59.png',
            menu: [],
            sites:[
                {
                    name1:'1',
                    name2: '问卷调查记录一',
                    name3:'2019-06-06',
                    name4:'发布中',
                    name5: ['统计','查看', '关闭投票'],

                },
                {
                    name1:'2',
                    name2: '问卷调查记录二',
                    name3:'2019-05-05',
                    name4:'已结束',
                    name5: ['统计',  '查看',  '删除']
                },
                {
                    name1:'3',
                    name2: '问卷调查记录三',
                    name3:'2019-04-04',
                    name4:'已结束',
                    name5: ['统计',  '查看',  '删除']
                },
                {
                    name1:'4',
                    name2: '问卷调查记录四',
                    name3: '2019-06-06',
                    name4:'已结束',
                    name5: ['统计',  '查看',  '删除']
                },
                {
                    name1:'5',
                    name2: '问卷调查记录五',
                    name3: '2019-05-05',
                    name4:'已结束',
                    name5: ['统计',  '查看',  '删除']

                },
                {
                    name1:'6',
                    name2: '问卷调查记录六',
                    name3: '2019-04-04',
                    name4:'已结束',
                    name5: ['统计',  '查看',  '删除']

                }
            ]
        },
        methods: {
            subshow(index) {
                this.menu[index].children_show = !this.menu[index].children_show;
            }



        },
        created() {
            var _this = this;
            // axios.post(
            //     'https://mockapi.eolinker.com/DMIc3CBdb0245c938fe2b74ccf103c7d1d65d6269949aaf/username?id=1'
            // ).then(function (res) {
            //     _this.username = res.data.username;
            //     _this.logo = res.data.logo;
            // });
            axios.post('https://mockapi.eolinker.com/DMIc3CBdb0245c938fe2b74ccf103c7d1d65d6269949aaf/menu2?menu=1')
                .then(function (res) {
                    _this.menu = res.data;
                })
        }
    })
</script>


<script>

</script>

</html>